<template>
  <div class="stapply-wrap">
    <NavBar/>
    <div class="panel-wrap apply-panel">
      <p class="apply-title">{{ $root.lang.stApply.title }}</p>
      <el-form class="apply-form" ref="form" :model="form" :rules="formRules" label-width="100px" size="small" :inline="true">
			  <el-form-item :label="$root.lang.stApply.item.pjname" prop="projectName"">
			    <el-input type="text" v-model="form.projectName" :placeholder="errmsg" style="width:490px;"></el-input>
			  </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.college" prop="college">
          <el-input type="text" v-model="form.college" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
			  <el-form-item :label="$root.lang.stApply.item.name" prop="realname">
			    <el-input type="text" v-model="form.realname" :placeholder="errmsg"></el-input>
			  </el-form-item>
			  <el-form-item :label="$root.lang.stApply.item.telephone" prop="telephone">
			    <el-input type="text" v-model="form.telephone" maxlength="11" :placeholder="errmsg"></el-input>
			  </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.email" prop="email"">
          <el-input type="text" v-model="form.email" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.address" prop="address">
          <el-input type="text" v-model="form.address" :placeholder="errmsg" style="width:270px;"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.stApply.item.post" prop="postcode">
          <el-input type="text" v-model="form.postcode" :placeholder="errmsg" style="width:107px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.introduce" prop="projectIntroduction">
          <el-input type="textarea" :rows="3" v-model="form.projectIntroduction" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.background" prop="projectBackground">
          <el-input type="textarea" :rows="3" v-model="form.projectBackground" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.summary" prop="projectSummary">
          <el-input type="textarea" :rows="5" v-model="form.projectSummary" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.field" prop="projectField">
          <el-input type="textarea" :rows="5" v-model="form.projectField" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.device" prop="deviceTypeName">
          <el-radio-group v-model="form.deviceTypeName">
            <el-radio label="JOSH MEGA ESP32开发板">JOSH MEGA ESP32开发板</el-radio>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.time" prop="time">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            :range-separator="$root.lang.stApply.item.timeSplit"
            :start-placeholder="$root.lang.stApply.item.timeBegin"
            :end-placeholder="$root.lang.stApply.item.timeEnd">
          </el-date-picker>
        </el-form-item>
        <br />
        <el-form-item :label="$root.lang.stApply.item.reason" prop="reason">
          <el-input type="textarea" :rows="5" v-model="form.reason" :placeholder="errmsg" style="width:490px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item label=" ">
          <p class="form-error">{{ errmsg }}</p>
          <el-button class="apply-btn" type="primary" @click="onSubmit" size="medium" :loading="loading" :disabled="loading || disable">{{ $root.lang.stApply.item.btn }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/public/NavBar'
import { checkPhone, checkEmail } from '@/utils/validate';
export default {
  name: 'STApply',
  components: {
    NavBar
  },
  data() {
    var checkMail = (rule, value, callback) => {
      if(!value) {
        callback(new Error(`${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.email}`))
      } else if(!checkEmail(value)) {
        callback(new Error(this.$root.lang.stApply.rules.emailError))
      } else {
        callback()
      }
    }
    var checkTelephone = (rule, value, callback) => {
      if(!value) {
        callback(new Error(`${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.telephone}`))
      } else if(!checkPhone(value)) {
        callback(new Error(this.$root.lang.stApply.rules.telephoneError))
      } else {
        callback()
      }
    }
    return {
      isLogin: false,
      form: {
        projectName: '',
        realname: '',
        college: '',
        telephone: '',
        email: '',
        address: '',
        postcode: '',
        projectIntroduction: '',
        projectBackground: '',
        projectSummary: '',
        projectField: '',
        deviceTypeName: 'JOSH MEGA ESP32开发板',
        time: null,
        reason: ''
      },
      formRules: {
        projectName: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.pjname}`, trigger: 'blur' }],
        realname: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.name}`, trigger: 'blur' }],
        college: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.college}`, trigger: 'blur' }],
        telephone: [{ required: true, validator: checkTelephone, trigger: 'blur' }],
        email: [{ required: true, validator: checkMail , trigger: 'blur' }],
        address: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.address}`, trigger: 'blur' }],
        postcode: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.post}`, trigger: 'blur' }],
        projectIntroduction: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.introduce}`, trigger: 'blur' }],
        projectBackground: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.background}`, trigger: 'blur' }],
        projectSummary: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.summary}`, trigger: 'blur' }],
        projectField: [{ required: true, message: `${this.$root.lang.stApply.rules.input}${this.$root.lang.stApply.item.field}`, trigger: 'blur' }],
        deviceTypeName: [{ required: true, message: `${this.$root.lang.stApply.rules.select}${this.$root.lang.stApply.item.device}`, trigger: 'blur' }],
        time: [{ required: true, message: `${this.$root.lang.stApply.rules.select}${this.$root.lang.stApply.item.time}`, trigger: 'blur' }],
        reason: [{ required: true, message: `${this.$root.lang.stApply.rules.select}${this.$root.lang.stApply.item.time}`, trigger: 'blur' }],
      },
      errmsg: '',
      loading: false,
      disable: false
    }
  },
  watch: {
    'form.time': function(value) {
      this.form.beginTime = this.form.time[0].getTime()
      this.form.endTime = this.form.time[1].getTime()
    }
  },
  created() {
    this.store.commit('GET_STATUS')
    this.store.commit('GET_TIME')
    let nowTime = new Date().getTime()
  	if(this.store.getters.status && this.store.getters.time && (nowTime < this.store.getters.time) ) {
      this.isLogin = true
    } else {
      this.isLogin = false
      this.$alert(this.$root.lang.stApply.notice.content, this.$root.lang.stApply.notice.title, {
        showClose: false,
        confirmButtonText: this.$root.lang.stApply.notice.btn,
        callback: action => {
          this.$router.push({ name: 'Home' })
        }
      })
    }
    console.log(this.isLogin)
  },
  methods: {
  	onSubmit() {
      this.errmsg = ''
  		this.$refs.form.validate(valid => {
		    if (valid) {
          this.doApply()
		    } else {
		      return false
		    }
		  })
  	},
    doApply() {
      this.loading = true
      this.request({
        url: '/api/device/apply/create',
        method: 'post',
        data: this.form
      }).then(response => {
        var base = this
        this.disable = true
        this.loading = false
        this.$message({
          message: '提交成功，请耐心等待审核',
          type: 'success',
          duration: 3 * 1000,
          onClose: function() {
            base.$router.replace({ name: 'DashboardPreview' })
          }
        })
      }).catch(error => {
        this.loading = false
        this.errmsg = error.errmsg
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/css/style.scss';

.stapply-wrap {
  background-color: #F5F5F6;
	padding-bottom: 30px;
}
.apply-panel {
	position: relative;
	margin: 30px auto 0;
	padding: 30px 50px;
	width: 610px;
	background-color: #ffffff;
	.to-login {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 12px;
		color: $color-blue;
		text-decoration: none;
	}
	.apply-title {
		margin-bottom: 30px;
		font-size: 18px;
	}
	.apply-form {
		margin: 0 auto;
		width: 100%;
    text-align: left;
	}
	.el-form-item {
		margin-bottom: 20px;
	}
	.apply-btn {
		width: 490px;
	}
	.agreement {
		font-size: 12px;
    * {
      vertical-align: middle!important;
    }
		a {
			color: $color-blue;
			text-decoration: none;
		}
	}
}
</style>